<template>
	<div id="reading">
		<div class="main">

			<div class="head-top">
				<mt-header title="">
					<mt-button icon="back" slot="left" @click='backcome'></mt-button>
					<mt-button slot="right">
						<router-link to='search'>
							<img src="../../../../../static/book/book04.png" alt="" width="30px" height="30px" />
						</router-link>
					</mt-button>
					<mt-button slot="right">
						<router-link to='search'>
							<img src="../../../../../static/book/book01.png" alt="" width="30px" height="30px" />
						</router-link>
					</mt-button>
				</mt-header>
			</div>

			<!--<div class="content" @click="main">
				豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。 遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？穷睇眄于中天，极娱游于暇日。

			</div>-->
			<div class="footer-top">
				<div>
					<mt-navbar class="home-nav" v-model='active'>
						<mt-tab-item class='nav-title' id='catalogue'>目录</mt-tab-item>
						<mt-tab-item class='nav-title' id='bookmark'>书签</mt-tab-item>
					</mt-navbar>
					<mt-tab-container v-model="active" swipeable>
						<mt-tab-container-item id="catalogue">
							<div>
								<div>
									
								</div>
								<div>
									
								</div>
							</div>
						</mt-tab-container-item>

						<mt-tab-container-item id="bookmark">

							456
						</mt-tab-container-item>
					</mt-tab-container>
				</div>

			</div>

		</div>

		<div class="footer" v-show="mainfooter">

			<div class="tabbar">
				<a href="#" class="tab-box" @click="sider">
					<div class="tab-box">
						<i slot="icon" class="iconfont icon-sort"></i>
					</div>
					<div class="text">目录</div>
				</a>

				<a href="#" class="tab-box">
					<div v-bind:style="{ color: activeColor}">
						<i slot="icon" class="iconfont icon-jindu"></i>
					</div>
					<div class="text">进度</div>
				</a>

				<a href="#" class="tab-box">
					<div class="item-icon">
						<i slot="icon" class="iconfont icon-zitiyanse"></i>
					</div>
					<div class="text">设置</div>
				</a>

				<a href="#" class="tab-box">
					<div class="item-icon">
						<i slot="icon" class="iconfont icon-yejianmoshi"></i>
					</div>
					<div class="text">夜间</div>
				</a>

			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selected: '',
				mainfooter: true,
				side: false,
				activeColor: '',
				active: 'catalogue',

			}
		},
		methods: {
			backcome() {
				this.$router.back(-1);
			},
			main() {
				this.mainfooter = !this.mainfooter;
				this.side = false;
			},
			sider() {

			}
		},
		watch: {
			selected: function(val, oldVal) {
				// 这里就可以通过 val 的值变更来确定
				if(val == 'catalogue') {
					this.side = true;
				}

			}
		}
	}
</script>

<style scoped="reading">
	.home-nav {
		width: 80%;
	}
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 0;
	}
	
	.footer {
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.footer .tabbar {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	
	.footer .tabbar>a {
		width: 25%;
		text-align: center;
		font-size: 12px;
	}
	
	.item-icon {
		padding-top: 4px;
	}
	
	.footer .tabbar>a>.text {
		color: #A1A1A1;
		margin-bottom: 3px;
	}
</style>